<template>
	<view class="fans-wrapper wrapperLayer">
		<view class="searchBar colCenCen borderBox wd100 pd20">
			<view class="searchbrContainer rowCen borderBox">
				<text class="searchIcon iconfont icon-search"></text>
				<input class="inputClass" type="text" v-model.trim="keyWord" placeholder="输入粉丝昵称"
					placeholder-class="inputStyle" @confirm="searchList">
			</view>
			<view class="chooseBar rowCen wd100 bdbox">
				<view class="chooseItem colCen" v-for="(item,index) in tabList" :key="index"
					:class="index==tabCurrent?'actitem':''" @click="tabCurrent = index">
					<view class="bordersty rowCen">
						{{item}}
					</view>
					<view class="brdbox"></view>
				</view>
			</view>
		</view>
		<view class="wd100" style="height: 180rpx;"></view>

		<view class="fansListContainer colCen pd20 wd100 borderBox">
			<block v-for="(item,index) in fansList" :key="index">
				<view class="fansItem wd100 rowCen pd20 borderBox" style="position: relative;">
					<image class="userIcon" v-if="item.avatar" :src="item.avatar" mode=""></image>
					<image class="userIcon" v-else src="https://xgz-saas.oss-cn-beijing.aliyuncs.com/icon/20231207/98d6d03862841809132edba7d3787a9f.png"></image>
					<view style="position: absolute;top: 93rpx;left: 12rpx;background: linear-gradient(0deg, #F7C394, #EFE0D6);
border-radius: 18rpx;font-size: 18rpx;width: 90rpx;height: 28rpx;display: flex;justify-content: center;align-items: center;" class="text_overflow">{{item.level_name}}</view>
					<view class="itemInfo colSta wd100">
						<view class="itemtitlebar wd100 rowCen">
							<!-- <text class="itemtxt"
								v-if="item.user.mobile">{{item.user.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</text> -->
							<text class="itemtxt" >{{item.nickname}}</text>
							<view class="tags rowCenCen">
								<text>{{tabCurrent==1?'间接':'直推'}}</text>
							</view>
						</view>
						<view class="timeiInfo rowCen">
							<text style="margin-right: 30rpx;">注册时间：{{item.create_time}}</text>
						</view>
					</view>
					<!-- <view class="level">
						{{item.user.levelInfo.name}}
					</view> -->
				</view>
			</block>
			<aLoadMore v-if="fansList.length>0 || pageNumber == 0" :status="loading" mode="loading3" :showTitle='true'
				color="#999999"></aLoadMore>
		</view>
		<view class="emptyArea colCen" v-if="fansList.length==0 && pageNumber > 0">
			<image class="emptyIcon" src="https://cdn.uviewui.com/uview/empty/data.png" mode=""></image>
			<text>空空如也~</text>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/user.js'
	export default {
		data() {
			return {
				count: '',
				keyWord: '',
				tabList: ['直属', '间接'],
				fansList: [],
				loading: 'loading',
				pageNumber: 1,
				tabCurrent: 0
			}
		},
		onLoad() {
			this.getList();
		},
		watch: {
			tabCurrent() {
				this.searchList()
			}
		},
		onPullDownRefresh() {
			this.fansList = [];
			this.loading = 'loading'
			this.pageNumber = 1;
			this.getList()
		},

		onReachBottom() {
			this.getList()
		},

		methods: {
			searchList() {
				this.loading = 'loading'
				this.fansList = [];
				this.pageNumber = 1;
				this.getList()
			},
			 getList() {
				try {
					Api.teamList({
						keyWord:this.keyWord,
						page_no: this.pageNumber,
						level: this.tabCurrent + 1,
					}).then((res) => {
						console.log(res)
						if (res.data.lists.length < 15) {
							this.loading = 'nomore'
						}
						this.pageNumber += 1
						this.fansList = this.fansList.concat(res.data.lists)
						if (!this.fansList) {
							this.fansList = []
						}
					}).catch((e) => {
						return this.$toast('接口请求错误');
					})
					
				} catch (e) {
					console.log(e)
					this.count = 0
				}
				uni.stopPullDownRefresh()
			},
		}
	}
</script>

<style lang="scss">
	.fans-wrapper {
		.searchBar {
			position: fixed;
			background-color: #FFFFFF;
			height: 180rpx;
			z-index: 100;

			.searchbrContainer {
				width: 100%;
				height: 70rpx;
				background: #F8F8F8;
				border-radius: 35rpx;
				padding: 0 20rpx;

				.searchIcon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.inputClass {
					flex: 1;
					font-size: 26rpx;
					font-weight: 500;
					color: #000;
				}
			}

			.chooseBar {
				height: 70rpx;
				padding: 0 60rpx;
				margin-top: 20rpx;

				.chooseItem {
					flex: 1;
					font-size: 30rpx;
					font-weight: bold;
					color: #666666;

					.brdbox {
						width: 32rpx;
						height: 4rpx;
						border-radius: 2rpx;
						background: transparent;
						margin-top: 4rpx;
					}
				}

				.actitem {
					color: #000;

					.brdbox {
						background: #FC1723;
					}
				}
			}
		}

		.emptyArea {
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;

			.emptyIcon {
				width: 264rpx;
				height: 200rpx;
				margin-top: 200rpx;
				margin-bottom: 30rpx;
			}
		}

		.fansListContainer {
			.fansItem {
				margin-top: 20rpx;
				height: 134rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.userIcon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.itemInfo {
					flex: 1;

					.itemtitlebar {
						margin-bottom: 10rpx;

						.itemtxt {
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;
						}

						.tags {
							width: 70rpx;
							height: 32rpx;
							background: #F5F5F5;
							border-radius: 16rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #666666;
							margin-left: 20rpx;
						}
					}

					.timeiInfo {
						font-size: 22rpx;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}
	}
	
	.text_overflow {
	   white-space: nowrap;
	   text-overflow:ellipsis;  
	   overflow:hidden;  
	}
</style>